<template>
  <view class="detail">
    <!-- 轮播图区域 -->
    <swiper class="swiper" indicator-dots autoplay circular>
      <swiper-item v-for="(item, index) in goodsInfo.pics" :key="index">
        <image mode="widthFix" :src="item.pics_big" />
      </swiper-item>
    </swiper>
    <view class="goods_price">
      <text class="new_price">￥{{ goodsInfo.goods_price }}</text>
      <text class="old_price"
        >￥{{
          goodsInfo.goods_price === 0
            ? 0
            : (goodsInfo.goods_price * 1.2).toFixed(0)
        }}</text
      >
    </view>
    <view class="goods_name">{{ goodsInfo.goods_name }}</view>
    <!-- 商品详情区域 -->
    <view class="goods_info">
      <view class="goods_info_title">图文详情</view>
      <view class="goods_info_content">
        <rich-text :nodes="goodsInfo.goods_introduce"></rich-text>
      </view>
    </view>
    <uni-goods-nav
      class="goods_nav"
      :fill="true"
      :options="options"
      :buttonGroup="buttonGroup"
      @click="onClick"
      @buttonClick="buttonClick"
    />
  </view>
</template>

<script>
import uniGoodsNav from "@/components/uni-goods-nav/uni-goods-nav.vue";
export default {
  components: { uniGoodsNav },
  data() {
    return {
      goodsInfo: {},
      options: [
        {
          icon: "headphones",
          text: "客服",
        },
        {
          icon: "shop",
          text: "店铺",
          info: 2,
          infoBackgroundColor: "#007aff",
          infoColor: "red",
        },
        {
          icon: "cart",
          text: "购物车",
          info: 2,
        },
      ],
      buttonGroup: [
        {
          text: "加入购物车",
          backgroundColor: "#ff0000",
          color: "#fff",
        },
        {
          text: "立即购买",
          backgroundColor: "#ffa200",
          color: "#fff",
        },
      ],
    };
  },
  onShow: function () {
    let pages = getCurrentPages();
    let currentPage = pages[pages.length - 1];
    let options = currentPage.options;
    let goods_id = options.goods_id;
    console.log(goods_id);
    this.getGoodsInfo(goods_id);
  },
  methods: {
    async getGoodsInfo(goods_id) {
      let res = await this.$myRequest({
        url: "/goods/detail",
        data: { goods_id },
      });
      this.goodsInfo = res;
      console.log(res);
      console.log(this.goodsInfo.pics);
    },
    onClick(e) {
      uni.showToast({
        title: `点击${e.content.text}`,
        icon: "none",
      });
    },
    buttonClick(e) {
      console.log(e);
      this.options[2].info++;
    },
  },
};
</script>

<style lang="less">
.detail {
  background-color: #eee;
}
.swiper {
  background-color: #fff;
  width: 100vw;
  height: 460rpx;
  swiper-item {
    width: 100%;
    text-align: center;
    image {
      width: 50%;
    }
  }
}
.goods_price {
  background-color: #fff;
  padding: 20rpx;
  display: flex;
  align-items: flex-end;
  .new_price {
    color: #ce665b;
    font-style: 32rpx;
    font-weight: 600;
  }
  .old_price {
    color: #ccc;
    font-size: 24rpx;
    text-decoration: line-through;
    padding-left: 20rpx;
  }
}
.goods_name {
  background-color: #fff;
  padding: 20rpx;
  margin-top: 20rpx;
  font-size: 28rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.goods_info_title {
  font-weight: 600;
  padding: 20rpx;
  background-color: #fff;
  margin-top: 20rpx;
  margin-bottom: 100rpx;
}
.goods_nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
</style>
